<template>
  <a-modal title="工具按钮添加" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="hideModal"
    :maskClosable="false" destroyOnClose width="720px" style="overflow: hidden;"
    :bodyStyle="{maxHeight:'520px',overflow:'auto'}">
    <a-spin :spinning="spinning">
      <a-form-model :model='formData' :rules='rules' ref='myForm' :style="{width:'100%'}" layout='horizontal'
        v-bind='{
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }' :colon='true' labelAlign='right'>
        <a-row style='height: 100%'>
          <a-col :span='24'>
            <a-form-model-item label='名称' prop='label' v-bind='{}'>
              <a-input v-model='formData.label' placeholder='' :allowClear='true' size='default'
                :disabled='false'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='功能标识' prop='sites' extra='仅在代码生成器有效'  v-bind='{}'>
              <a-select v-model='formData.sites' mode='default' :showSearch='true' placeholder=''
                size='default' :disabled='false'>
                <a-select-option  value='custom'>
                  自定义
                </a-select-option>
                <a-select-option  value='add'>
                  新增
                </a-select-option>
                <a-select-option  value='dels'>
                  删除
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='颜色'  prop='type' v-bind='{}'>
              <a-select v-model='formData.type' mode='default' :showSearch='true' placeholder=''
                size='default' :disabled='false'>
                <a-select-option v-for='(opt,idx) in type_options' :key='idx' :value='opt.value'>
                  {{opt.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='图标' prop='icon' extra='这里只列出个别，其它请参考官方文档' v-bind='{}'>
              <a-select v-model='formData.icon' mode='default' :showSearch='true' placeholder=''
                size='default' :disabled='false'>
                <a-select-option v-for='(opt,idx) in icon_options' :key='idx' :value='opt.value'>
                  {{opt.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      idx: '', // 当前编辑的序号
      spinning: true,
      confirmLoading: false,
      visible: false,
      defaultFormData: {
        sites: '',
        label: '',
        type: '',
        icon: ''
      },
      formData: {},
      rules: {
        label: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }, {
          max: 10,
          message: '名称最大长度不能大于10',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '颜色不能为空',
          trigger: 'change'
        }],
        sites: [{
          required: true,
          message: '功能标识不能为空',
          trigger: 'change'
        }],
        icon: [{
          required: true,
          message: '图标不能为空',
          trigger: 'change'
        }]
      },
      type_options: [{
        'label': 'default',
        'value': 'default'
      }, {
        'label': 'primary',
        'value': 'primary'
      }, {
        'label': 'danger',
        'value': 'danger'
      }, {
        'label': 'link',
        'value': 'link'
      }],
      icon_options: [{
        'label': '新增',
        'value': 'plus'
      }, {
        'label': '删除',
        'value': 'delete'
      }, {
        'label': '导入',
        'value': 'upload'
      }, {
        'label': '导出',
        'value': 'download'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    showModal(item, idx) {
      this.visible = true
      this.idx = idx === undefined ? -1 : idx
      this.formData = Object.assign({}, this.defaultFormData)
      if (item) {
        this.formData = Object.assign({}, {
          label: item.label,
          icon: item.icon,
          type: item.type,
          sites: item.sites
        })
      }
      this.spinning = false
    },
    hideModal() {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          this.$emit('success', {
            label: this.formData.label,
            icon: this.formData.icon,
            type: this.formData.type,
            sites: this.formData.sites
          }, this.idx)
          this.confirmLoading = false
          this.hideModal()
        }
      })
    },
    onReset() {
      this.$refs['myForm'].resetFields()
      this.hideModal()
    }
  }
}

</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper+.ant-checkbox-wrapper {
  margin-left: 0px;
}

</style>
